@extends('template')
@section('css')
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .grids-icon{
            font-size: 0.5rem;
        }
        .header-tx{
            width: 100%;
            height: 4rem;
            background: url("{{asset('img/txbg.jpg')}}") no-repeat 0/cover;
            display: flex;
        }
        .header-tx>div{
            margin-top: 2rem;
        }
        .tx-left{
            flex: 0.8;
            height: 2rem;
        }
        .tx-left div{
            width: 1.5rem;
            height: 1.5rem;
            float: right;
            position: relative;
        }
        .tx-right{
            flex: 2;
            height: 2rem;
        }
        .tx-right div{
            height: 1.5rem;
            width: 4.5rem;
            background: rgba(255,255,255,0.5);
            padding: 0.2rem;
        }
        .header-tx img{
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            z-index: 666;
        }
        .tx-left span{
            position: absolute;
            width: 50%;
            height: 100%;
            right: 0;
            top: 0;
            background: rgba(255,255,255,0.5);
            z-index: 555;
        }
        .tx-right h2{
            width: 70%;
            font-size: 0.4rem;
        }
        .tx-right p{
            width: 70%;
            font-size: 0.3rem;
        }
        .list-theme4 .list-item{
            padding: 0.2rem;
        }
        .left{
            flex: 0.5;
            text-align: center;
        }
        .left div{
            width: 1rem;
            height: 1rem;
            margin: 0 auto;
        }
        .left span{
            margin-top: 0.2rem;
            display: block;
            text-align: center;
        }
        .left img{
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
        .right{
            flex: 2;
            padding-left: 0.5rem;
        }
        .right-item .left{
            order: 2;
        }
        .right-item .right{
            order: 1;
            padding-left:0;
        }
        .rightbubble{
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #FF3030;
            background-color: #fff;
            border-radius: 5px;
            display: inline-block;
            padding: 3px 10px;
        }
        .rightbubble .bottomLevel{
            position: absolute;
            border-right: 10px solid transparent;
            top: 11px;
            right: -10px;
            border-top: 10px solid #FF3030;
        }
        .rightbubble .topLevel{
            position: absolute;
            border-right: 10px solid transparent;
            bottom: 12px;
            top: 12px;
            right: -8px;
            border-top: 10px solid #fff;
            z-index: 100;
        }
        .title{
            text-align: center;
            background: #fff;
            height: 0.8rem;
            font-size: 0.3rem;
            line-height: 0.8rem;
        }
        .del{
            color: #999;
            position: absolute;
            right: 0.2rem;
            bottom: 0.15rem;
        }
        .confirm-ft>a.confirm-btn.primary{
            color: #FF3030;
        }
        .about{
            padding: 0.2rem;
            text-align: center;
            font-size: 0.25rem;
            border-radius: 5px;
            background: #fff;
        }
        .right>span{
            padding: 0.2rem;
        }
        .list-item .time{
            position: absolute;
            right: 0.15rem;
            top: 0.15rem;
        }
    </style>
@stop
@section('content')
    <div class="g-scrollview">

        @if(session()->has('uid'))
            <div class="header-tx">
                <div class="tx-left">
                    <div><span></span><img src="http://q1.qlogo.cn/g?b=qq&nk={{$data->qq}}&s=5"></div>
                </div>
                <div class="tx-right">
                    <div>
                        <h2>{{$data->username}}</h2><br/>
                        <p>{{$data->qq}}</p>
                    </div>
                </div>
            </div>
            <div class="m-grids-2">
                <a href="{{route('update')}}" class="grids-item">
                    <div class="grids-icon"><i class="icon-feedback"></i></div>
                    <div class="grids-txt"><span>修改</span></div>
                </a>
                <a href="{{route('loginout')}}" class="grids-item">
                    <div class="grids-icon"><i class="icon-share2"></i></div>
                    <div class="grids-txt"><span>退出</span></div>
                </a>
            </div>
            <div class="title">已发表</div><br/>

            <article class="m-list list-theme4">
                @foreach($list as $v)
                <div class="list-item right-item">
                    <div class="left">
                        <div><img src="http://q1.qlogo.cn/g?b=qq&nk={{$v->qq}}&s=5"></div>
                        <span>{{$v->username}}</span>
                    </div>
                    <div class="right">
                    <span class="rightbubble">
                        <h3 class="list-title">对 <span class="badge badge-radius badge-danger">{{$v->taname}}</span> 说：</h3>
                        {{$v->love_text}}
                        <span class="time">{{$v->time}}</span>
                        <span class="del" data-id="{{$v->id}}">删除</span>
                        <span class="bottomLevel"></span><span class="topLevel"></span>
                    </span>
                    </div>
                </div>
                @endforeach
            </article>
            @else
            <div class="header-tx"></div>
            <div class="m-grids-2">
                <a href="{{route('login')}}" class="grids-item">
                    <div class="grids-icon"><i class="icon-ucenter-outline"></i></div>
                    <div class="grids-txt"><span>登录</span></div>
                </a>
                <a href="{{route('signup')}}" class="grids-item">
                    <div class="grids-icon"><i class="icon-compose"></i></div>
                    <div class="grids-txt"><span>注册</span></div>
                </a>
            </div><br/>
            <div class="about">
                站长提示：<br/>
                欢迎新朋友你的到来！
                <br/>
                大胆向Ta表白吧！
                <br/>
                PS:请登录后发表
            </div>
        @endif


    </div>

    <footer class="m-tabbar">
        <a href="{{route('home')}}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-home"></i>
                </span>
            <span class="tabbar-txt">首页</span>
        </a>
        <a href="{{route('deliver')}}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-like-outline"></i>
                </span>
            <span class="tabbar-txt">发表</span>
        </a>
        <a href="{{route('ucenter')}}" class="tabbar-item  tabbar-active">
                <span class="tabbar-icon">
                    <i class="icon-ucenter"></i>
                </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>
@stop
@section('js')
    <script>
        !function (win,$) {
            var dialog = win.YDUI.dialog;
            $('.del').on('click', function () {
                var id = $(this).data('id');
                var this_ = $(this);
                dialog.confirm(' ','确定要删除吗？！', function () {
                    $.ajax({
                        type:'post',
                        url:'{{route('del')}}',
                        data:{id:id},
                        success:function (result) {
                            if (result) {
                                this_.parents('.list-item').remove();
                                dialog.toast('删除成功！', 'success', 1500);
                            }else {
                                dialog.toast('删除失败！', 'error', 1500);
                            }
                        }
                    });
                });
            });
        }(window,jQuery);
    </script>
@stop
